<template>
    <el-container>
        <el-affix :offset="10">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <el-radio-group v-model="isCollapse" style="margin:0 0 20px 20px">
                    <el-radio-button :value="false">展开</el-radio-button>
                    <el-radio-button :value="true">折叠</el-radio-button>
                </el-radio-group>
                <el-header style="
                  display: flex;
                  align-items: center;
                  height: 60px;
                  width: auto;
                ">
                    <div style="flex-grow: 1"></div>
                    <router-link to="/cart" style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
                    padding-right: 20px;
                    text-decoration: none;
                    color: inherit;
                  ">
                        <el-badge :value="bookStore.orderedBooksCount" :max="10" class="badge-item">
                            <span class="icon-wrapper">
                                <el-icon style="font-size: 25px">
                                    <ShoppingCart />
                                </el-icon>
                            </span>
                        </el-badge>
                    </router-link>
                    <div style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
                    padding-right: 20px;
                  ">
                        <span class="icon-wrapper">
                            <el-icon style="font-size: 25px">
                                <Setting />
                            </el-icon>
                        </span>
                    </div>
                    <div style="padding-right: 20px">
                        <el-popover placement="bottom" trigger="hover">
                            <el-menu mode="vertical">
                                <el-menu-item index="1" @click="handleMenuItemClick(1)">个人中心</el-menu-item>
                                <el-menu-item index="2" @click="handleMenuItemClick(2)">关于我们</el-menu-item>
                                <el-menu-item index="3" @click="handleMenuItemClick_exit(3)">退出登录</el-menu-item>
                            </el-menu>
                            <template #reference>
                                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                            </template>
                        </el-popover>
                    </div>
                </el-header>
            </div>
            <div style="display: flex;">
                <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @select="handleSelect">
                    <el-menu-item index="/index">
                        <el-icon>
                            <House />
                        </el-icon>
                        <template #title>首页 </template>
                    </el-menu-item>
                    <el-menu-item index="/booklist">
                        <el-icon>
                            <Folder />
                        </el-icon>
                        <template #title>图书列表</template>
                    </el-menu-item>
                    <el-menu-item index="/booksales">
                        <el-icon>
                            <Reading />
                        </el-icon>
                        <template #title>图书售卖</template>
                    </el-menu-item>
                    <el-menu-item index="/help">
                        <el-icon>
                            <Warning />
                        </el-icon>
                        <template #title>帮助</template>
                    </el-menu-item>
                </el-menu>
                <el-main style="flex: 1;">
                    <h3 style="text-align: left">帮助中心</h3>

                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content">
                                <div class="text-left">
                                    <h3>亲爱的用户，欢迎您！</h3>
                                    <a href="#" class="green-link" @click.prevent="showDialog('新手指南')">新手指南</a>
                                    <el-divider />

                                    <a href="#" class="green-link"
                                        @click.prevent="showDialog('常见问题解答(FAQ)')">常见问题解答(FAQ)</a>
                                    <el-divider />

                                    <a href="#" class="green-link" @click.prevent="showDialog('详细教程')">详细教程</a>
                                    <el-divider />

                                    <a href="#" class="green-link" @click.prevent="showDialog('故障排除')">故障排除</a>
                                    <el-divider />

                                    <a href="#" class="green-link" @click.prevent="showDialog('专业支持')">专业支持</a>
                                </div>
                                <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%"
                                    :before-close="handleClose">
                                    <div class="dialog-content">{{ dialogMessage }}</div>
                                    <template #footer>
                                        <span>
                                            <el-button @click="dialogVisible = false">取消</el-button>
                                            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                                        </span>
                                    </template>
                                </el-dialog>
                            </div>
                        </el-col>
                    </el-row>

                    <div style="
                        height: 60px;
                         ">
                        <div>Designed with by XXX</div>
                    </div>
                </el-main>
            </div>

            <!-- 路由出口，用于显示当前路由对应的组件 -->
            <router-view></router-view>
        </el-affix>

    </el-container>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import {
    Reading,
    House,
    Warning,
    Folder,
    Search,
    ArrowRight,
    CaretBottom,
    CaretTop,
    Top,
    Bottom,
    Close,
    Setting,
    ShoppingCart,
    Plus,
} from "@element-plus/icons-vue";
import type {
    TabsPaneContext,
    ElDialog,
    ElButton,
    ElDivider,
} from "element-plus";
import { useRouter } from "vue-router";
import {
    ElPopover,
    ElAvatar,
    ElMenu,
    ElMenuItem,
    ElMessage,
    ElMessageBox,
} from "element-plus";
import dayjs from "dayjs";

import "../mock/iconfont.js";
import { useLogout } from "../composables/useLogout";
import { useBookStore } from '../stores/bookStore';

const router = useRouter();
const bookStore = useBookStore();

const dialogVisible = ref(false);
const dialogMessage = ref("");
const dialogTitle = ref("");

onMounted(() => {
    const userData = localStorage.getItem("userData");
    if (!userData) {
        // 如果没有获取到数据，跳转到登录页
        router.push("/login");
    }
});

// 定义书籍对象的类型
type Book = {
    author: string;
    bookName: string;
    bookNumber: string;
    saleTime: Date | null;
};

const isCollapse = ref(false);

// 创建一个响应式的布尔变量，初始值设为true，表示div初始是可见的
const isDivVisible = ref(true);

const handleSelect = (key: string) => {
    // 根据菜单项的 index 值切换页面

    router.push(key);
};

const handleMenuItemClick = (index: number) => {
    console.log(`你点击了选项 ${index}`);
};

const { isLoading, logout } = useLogout();
const handleMenuItemClick_exit = async (index: number) => {
    console.log(`你点击了选项 ${index}`);
    await logout();
};

// 定义 infoMap 的类型，使用索引签名
type InfoMapType = {
    [key: string]: string;
};

// 定义每个超链接对应的详细信息
const infoMap: InfoMapType = {
    新手指南: `这里是新手指南的详细信息。新手指南会帮助您快速了解我们的系统的基本操作和功能，让您能更快地上手使用。比如，如何注册账号、如何浏览主要页面等。`,
    "常见问题解答(FAQ)": `这是常见问题解答的内容。在这里您可以找到一些用户经常遇到的问题及其解决方案，例如登录问题、数据显示异常等。`,
    详细教程: `详细教程会为您提供系统各项功能的深入讲解。从基础的操作到高级的应用技巧，都会一一为您呈现，帮助您更好地利用系统的功能。`,
    故障排除: `当您遇到系统故障时，故障排除部分可以帮助您找到问题所在并解决。我们会列出常见的故障现象以及对应的解决办法。`,
    专业支持: `如果您在使用过程中遇到了复杂的问题，我们的专业支持团队随时为您服务。您可以通过电话、邮件等方式联系我们，我们会尽力为您解决问题。`,
};

const showDialog = (key: string) => {
    dialogTitle.value = key;
    dialogMessage.value = infoMap[key] || "未找到相关信息";
    dialogVisible.value = true;
};

const handleClose = () => {
    dialogVisible.value = false;
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
    /* background-color: gray; */
    background-color: #fff;
}

.el-aside {
    background-color: #fff;
    /* background-color: pink; */
    border: 1px solid #f5f6fe;
}

.el-main {
    background-color: #f5f6fe;
    /* background-color: orange; */
}

.el-menu {
    border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.grid-content {
    border-radius: 4px;
    min-height: 400px;
    background-color: #fff;
    padding: 20px;
}

/* 设置 h3 标题的上下外边距 */
.grid-content h3 {
    margin: 0 0 15px 0;
}

:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}

p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: left;
}

.p-vertically-center {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    height: 100%;
    /* 确保容器有高度 */
}

.p-vertically-center p {
    margin: 5px 40px;
    /* 为每个段落添加上下外边距 */
}

/* Vue 3 中使用 ::v-deep 穿透样式，将所有标签页标题文字加粗 */
::v-deep .el-tabs__item {
    font-weight: bold;
}

/* 确保弹出框有最小宽度 */
.el-popover {
    min-width: 120px;
    z-index: 1000;
    /* 确保弹出框显示在最上层 */
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.overflow-menu-icon {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.message-box-content {
    white-space: pre-line;
}

.text-left {
    text-align: left;
}

/* 定义超链接样式 */
.green-link {
    display: block;
    margin: 10px 0;
    color: green;
    text-decoration: none;
    /* 添加字体大小属性，这里设置为 18px，可以根据需求调整 */
    font-size: 18px;
}

/* 鼠标悬停时的样式 */
.green-link:hover {
    text-decoration: none;
}

/* 设置分割线的上下外边距 */
.grid-content .el-divider {
    margin: 15px 0;
    border-color: rgba(0, 0, 0, 0.1);
    /* 使用 rgba 设置淡颜色，这里透明度为 0.1 */
}

.badge-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>